Basándonos en esta plantilla vamos a añadir unos efectos de marco para separar el espacio de las entradas y sidebar.
Lo que haremos será añadir una línea en los CSS de la plantilla según el lugar donde deseamos añadirla. Podéis probar jugando con el tipo le línea, color y tamaño de enmarcado.
Para los ejemplos añadí un borde 4px; bastante grueso para mi gusto, un borde 1px; queda elegante y consigue el mismo efecto para delimitar las zonas.
Nos situaremos plantilla Edición de HTML.
Si deseamos enmarcar el espacio de las entradas o post localizaremos:#main-wrapper { y añadiremos: border: dotted #B0171F; 4px;
Para enmarcar la columna nos dirigimos a #sidebar-wrapper {y añadimos la misma línea de código: border: dotted #B0171F; 4px;
La misma operación la podemos hacer en .post-footer { 
border: dotted #B0171F; 4px;
border: dashed #B0171F; 4px;
border: solid #B0171F; 4px;
border: double #B0171F; 4px;
border: ridge #B0171F; 4px;
border: groove #B0171F; 4px;
border: inset #B0171F; 4px;
border: outset #B0171F; 4px;
Si además de enmarcar también queréis añadir color de fondo se puede conseguir añadiendo: background-color: #B0171F; en el mismo lugar que agregamos el código para enmarcado.
¡Muy buena entrada!
Aunque lo que más me ha servido ha sido el nombre de los bordes =D
¡Saludos!
Gemma, deseo pedir tu ayuda porque quiero arreglar mi blog. Creo que necesito una plantilla de tres columnas, para que no se vea tan recargado de un solo lado.El problema es que no se si los escript que tengo como el de el cartel de despedida, las letras que llevan a los post de música o el de espera,que me gustan mucho y me costo tiempo funcionaran, podrán trasladarse...y no los quiero perder.
Mi idea es un blog que no pierda mis imagenes pero que esté mas balanceado y que tenga pestañas, deseo que en esas pestañas haya enlaces a mi blogrroll ,al de cuentos y a mi fotolog.
Mi otro problema es el header...se que no se puede poner como lo tengo en el actual en una plantilla nueva y me gusta mucho.
En fin, pensaba en buscar una plantilla y crear un nuevo blog donde probar como van quedando las cosas, a ver si resulta. No se si me puedes recomendar alguna y si me puedes decir como hacerlo con los script y con las pestañas...debo hacerlo antes de marzo, pues empiezo con mi tesis y hi no tendre posibilidades de crear nada.
Me he resistido hasta ahora a pasar mi mundo a una plantilla "nueva" porque me quita posibilidad de movimiento ,de creación, pero me han criticado tanto , que creo que me daré por vencida.
Lo otro seria adaptar la plantilla actual y poner una tercera columna y ver si se le pueden agregar pestañas, pero seria mas engorroso No?
disculpa que sea una molestia, pero no se a quien recurrir...sorry
Gracias
Un besote
LIZ
BESOTES Y DISCULPA POR MOLESTAR
LIZ
Muy bueno Gema!! ^^ justamente lo que queria hacer, pero para los posts, me gustaría ponerle una imagen alrededor, para resaltarlo aún más ^^, ¿como se añadiría?.
Gracias!!y saludos nuevamente!! ^^
No tube suerte, no encontré ninguna plantilla de tres columnas bonita...
encontré la mía con trs columnas...pero mirando mi blog va a ser un trabajo de chinos trasladarla y no podría ponerle pestañas...oh que dificil!!!
Gracias Markos, el nombre de los bordes es una información que puedes encontrar en cualquier manual de HTML ;)
Elizabetha esperaba tu llegada para decirte que miré lo de las imágenes de fondo, quería tener preparada la información para tu regreso pero lo que encontré sólo es visible con Explorer no se visualizan los cambios con Firefox.
Sobre cambiar de plantilla o modificar la que tienes debe ser decisión tuya según tus necesidades.
No me dices a qué blog quieres hacer los cambios y si te refieres cambiar plantilla clásica por una del "nuevo" Blogger o es sustituir una de las llamadas nuevo Blogger o beta por otra plantilla.
Lo que te recomiendo es que si decides cambiar de una platilla clásica a una "beta" hagas lo siguiente:
Los script y todo lo que tengas agregado por ti a la plantilla lo puedes copiar y guardarlo en un archivo para luego pegarlo en el nuevo espacio.
Copia todo el contenido de la plantilla y guárdalo en un archivo de texto.
Si es sustituir la plantilla beta por otra puedes descargar a tu PC la plantilla que tienes ahora en Diseño/Edición de HTML/Descargar plantilla completa. Esa plantilla puede serte útil para rescatar algún script de los que no quieres perder.
Sobre añadir pestañas o menú a la plantilla que ya tienes puedes hacerlo sin problemas.
Lo de añadir una tercera columna pienso que también necesitaría ver tu plantilla para decirte como hacerlo. Lo que si tienes que tener en cuenta es que al añadir una tercera columna hay que añadir ese espacio al blog. Bien restando ese espacio a las entradas y columna que tienes o... dándole mayor medida al blog aumentando el ancho.
¿Qué resolución de pantalla sueles usar?
En mi opinión y si tienes poco tiempo lo mejor es cambiar de plantilla (siempre que encuentres una que te guste más que la que tienes)de esa forma todo el trabajo que tendrás que hacer será copiar y pegar esos script de carga de página y despedida.
Hay muchas páginas de plantillas, busca en plantillas para Blogger son las que menos problemas te darán.
Según las consultas que me van haciendo en las adaptadas para Blogger se hace más complicado añadir modificaciones a la plantilla ten ese dato en cuenta.
Date una vuelta por el blog de Ronnie tiene plantillas sencillas y a la vez muy elegantes que las puedes modificar respecto a color o imágenes. También hace trabajos por encargo puedes consultarla.
Y un dato más y no menos importante "No es ninguna molestia contestar tus dudas Elizabetha"
Un besote amiga ;)
Hola Nu puedes añadir la imagen en #main-wrapper { de esta forma:
background-image: url(url-de-la-imagen);
background-attachment: fixed;
background-repeat: no-repeat;
El atributo fixed es para que la imagen quede fija y repeat: no-repeat para que no se repita la imagen.
También puedes probar de este otro modo.
Mira el blog de Ronnie, me olvidé dejarte el enlace http://doxs.blogspot.com/
Piensa que puedes cambiar colores e imágenes, personalizar cualquier plantilla a tu gusto.
Gemma..vi casi todos los sitios que recomendate y no encontre ninguna plantilla bonita de tres columnas... y blogger está son pocas platillas por un tiempo, asi qeu esperaré.Creo que haré mas cambios en el sidebar para achicarlo... con cajitas.
ah!! la platilla igual a la mia de tres columnas queda fea, la probé...no se como optimizar mi blog tendria que sacra muchas cosas.Me gsutaría tener pestañas con la platilla que tengo, pero no creo qeu se pueda.Tu sabes mejor
AH!!!GRACIAS POR AVERIGUAR LO DE LOS FONODS..COMO SIEMPRE UN SOL GIGANTE
BESOTES
GRACIAS
Hola Gem@! cuanto tiempo sin pasar por aqui! bueno en realidad ha pasado mucho tb desde que no me ponia con mi propio blog....pero bueno, ahora que lo he remodelado todo, este post tuyo me ha venido muy bien! Thanks!
Elizabetha esta entrada la hice pesando en ti ;)
Gracias Syl está muy cambiado el blog, me gusta queda muy alegre ;)
Hola Gemma: Aunque es la primera vez que te escribo, he seguido muy de cerca tu blog desde hace ya mucho tiempo. Tengo una duda: ¿Cómo le hago para enmarcar, no toda la sidebar con un solo borde, sino cada uno de los elementos de la sidebar con bordes individuales (tal y como aparecen en El escaparate de Rosa). De antemano muchas gracias por la ayuda que puedas brindarme y felicidades por tu blog y los premios que, merecidamente, haz ganado. En hora buena!
Saludos R.Baños casi todos esos efectos se consiguen añadiendo unas líneas en los CSS. Aunque también es cierto que todas las plantillas no son iguales y los códigos que debemos buscar para hacer la modificación son diferentes.
Puedes probar a buscar en la plantilla:
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Una vez localizado hay que hacer independientes los widgets de la sidebar y el main. Eso lo conseguimos
de la siguiente forma:
.sidebar .widget{
border:1px dotted #000000;
padding-left: 10px;
margin:0 0 1.0em;
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Lo que hicimos fue crear dos widgets y copiar el mismo código en la sidebar que en el main (aparece en negrita)
Si deseas que las esquinas queden redondeadas puedes añadir:
-moz-border-radius: 15px;
-webkit-border-radius: 15px; a los dos widgets.
Cambiar el borde que aparece como "dotted" por otro que puedes encontrar en esta misma entrada de "Enmarcar-delimitar espacios en el blog" darle grosor al borde en "border"
Agrandar o disminiur el radio de las esquinas en:moz-border-radius.
Y por supuesto cambiar el color o añadir una imagen.
Modificando los CSS casi todo es posible.
(Haz una copia de tu plantilla antes de realizar cambios)
¡Muchas gracias! Ya lo probé en mi blog y fue todo un éxito. Saludos
Ya lo he visto está genial ;)
Hola gem@ otra vez yo, k_nelita, gracias a tus consejos pude poner la cabecera y el enlace al blog, pero... ahora me quedó un espacio entre la cabecera y los post y sidebar, no se como sacarlo, aunque de alguna manera lo achiqué (no me preguntes como) era muuuuucho mas grande.
Y teniendo que ver con este tema, el de tu entrada, me gustaría que la imagen que puse de separación entre los post no fuera así, sino una linea de puntos como las que pones aquí, que como verás ya he utilizado para enmarcar los post, pero la linea roja de separación me parece fea, creo que quedaría mejor una linea punteada.
Todavía no metí mano a Te Propongo, no doy a basto ja ja
Te parece que será solo lo del leer mas? Porque solo se ven los dos primeros articulos aparte de no verse la sidebar.
Igual después pruebo.
Millones de gracias!!!
Besotes!
Por cierto, se me olvidaba decirte que tu blog está muuuuy lento, subir y bajar le cuesta mucho hace ya como dos días, le hiciste algo nuevo?
Besos!
k_nelita
Hola gem@, soy k_nelita, he visto que estás muy ocupada, por eso no insistí antes, pero sigo con el problema de la cabecera, ya me bajé la plantilla en un blog de pruebas y valga la redundancia, estoy probando, pero nada, el espacio entre cabecera y menús sigue quedando.
También le puse la linea punteada bordeando todo el blog, la puse de 1px y aún así sale muy gruesa, ahora la cambié por solid y es lo mismo gruesa.
Lo que te había preguntado también era si se podía poner una linea finita entre los artículos, ya tiene una imagen roja, pero es muy gruesa, es imagen, no se puede hacer como explicas aquí? delimitar entre los post con una linea delgada?
Ya corregí lo de Te Propongo, le saqué el leer mas y ahora se ve bien con Explorer (el maldito) pero me apena mucho porque no se ven bien los artículos todos enteros, me parece que voy a tener que cambiar de plantilla, en esa no se puede hacer casi nada y me está dando muchos dolores de cabeza.
Gracias gem@, se que cuando puedas me contestarás, lástima que después no encuentro el articulo donde te dejé el comentario, ahh ya se voy a poner que me llegue la respuesta al correo.
Besotes!
Hola K_nelita es cierto que he estado arreglando algunas cosillas de mi blog y contestando email muy atrasados, así que vamos a ver que pasa a la cabecera de HaBi.
Yo creo que ese espacio es el que ocupa el aviso para mostrar todas las entradas con una misma etiqueta ¿como saberlo? sin duda como siempre probando. Haz lo que dice en esta entrada, creo que será la solución ;)
Vamos con las líneas:
El grosor mínimo es 1 si aún parece grueso lo que podemos hacer es cambiar de tipo de borde.
Añade en #outer-wrapper { lo siguiente:
border-top: 1px double#000;
border-left: 1px double#000;
border-right: 1px double#000;
border-bottom: 1px double#000;
es una línea doble pero añadiendo el grosor mínimo proporciona un efecto contrario al que pensamos.
La línea roja que separa los post la puedes sustituir por una más fina situandote en:
<b:include data='post' name='post'/>
Y después añades:
<hr color="brown" size="1"/>
Si deseas una línea punteada delimitando las entradas puedes hacerlo desde fuentes y colores es la forma más sencilla de realizar.
La plantilla de Te propongo es una maravilla pero tiene sus inconvenientes que en su día ya mencioné, es una pena después del trabajo que te has dado pero si no estás contenta con ella no lo pienses, guarda una copia antes de eliminarla por si luego te arrepientes ;)
Abrazos.
Hola gemit@, si, he visto los cambios que has hecho, los avatares, etc, pero aún la noto bastante lenta la carga de tu blog.
Bueno te cuento, siempre como una buena alumna he logrado adelgazar las lineas del blog de HaBi, todavía no me termina de conformar pero por lo menos está mas fino, o sea mas delicado, tengo que respetar sus diseños, el fondo la cabecera y todo eso, y hablando de cabecera no logré mas que correrla un poquito a la derecha (depende de que lado se mire) y también tiene ahora un pequeño espacio arriba, pero eso no sería nada, la cuestión es que el espacio que te decía en un principio sigue estando, hice lo que me dijiste pero no he conseguido mas de lo que te digo.
Y otra cosa, yo no veo ningún cartel como dices, solo un espacio...
Otra preguntita, como podría cambiarle el color de fondo? el color blanco que se ve cuando carga la pagina? Yo le corregí el #ffffff por #000000, no me acuerdo en que parte pero parece que está mal, porque no modificó nada.
Besotes gem@ y gracias como siempre por todas tus molestias, sos un sol de persona!!
Gracias Gem@ me ha servido de mucha ayuda esta entrada.:D
Habi, ¿no será tu conexión? lo digo porque ami me carga en segundos.
Habi ese cartel suele visualizarse cuando clicamos en una categoría, aparece y nos pregunta si deseamos ver todas las entradas con dicha categoría.
Yo creo que el espacio es el que ocupa ese cartel (aunque no se vea está ahí)
¿Seguiste los pasos para eliminarlo?
Sobre el fondo blanco, ya sé donde dices que lo has cambiado, pero yo veo todas las páginas de cualquier blog en color blanco, de todas formas voy a mirar si tiene solución.
Gracias por el comentario +ANa+ y por la observación, me dejas más tranquila :)
Si gem@ seguí los pasos y allí está el dichoso espacio, sin ganas de irse...
+ANA+ puede ser que sea mi conexión, casi todo me anda muy despacio, la conexión o la pc, pero particularmente este blog me tarda mas que de costumbre, claro que hay tanta cosa aquí... pero útil, claro.
Gracias gem@ por ocuparte de mis cosas! Besotes!
Habi: busca lo siguiente:
body {
background:url("aquí tienes la imagen de fondo"
);
background: #000000;
margin:0;
color:#E5E5E5;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
(Añade lo que está en negrita)
Luego en #header-wrapper { sustituye:
margin:0 auto 10px;
por... margin:0px auto;
Si con eso no resulta me lo dices y seguimos probando ;)
Muchas gracias gem@ por todas las molestias que te tomas, pero, no, el espacio sigue estando, y al ponerle fondo negro después de la imagen de fondo como me pones en el código, sale todo negro y la imagen desaparece, o sea, #000000 si pongo eso debajo de la url de la imagen se ve todo negro sin imagen de fondo.
Y el asunto del espacio debajo de la cabecera sigue allí.
Besos gem@ (soy k_nelita ehh) no te imagines que mi hijo hace nada de esto, solo escribe ja ja ja
Si k_nelita ya sé que eres tú jajaja
Veamos se puede añadir la imagen y también el color, cuando añadimos la imagen esta queda fijada al fondo del blog, el color es lo que vemos cuando la pantalla está cargando.
La forma de darle color al fondo es la que te decía, es más incluso ahora mismo lo hice en mi blog y puedes verlo.
He aplicado la plantilla a mi blog de pruebas, para quitar ese espacio debajo del logo puedes hacer dos cosas, suprimir el logo de la forma que te dije (como tienes ahora o suprimir esta parte de código:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='prueba comentarios (cabecera)' type='Header'/>
</b:section>
</div>
Pero si lo eliminas también eliminas la opción para añadir más elementos debajo del logo como menús ect...
-Haz una copia de la plantilla antes de probar y realizar cambios ;)
Si gem@ ya se que la imagen queda fijada y el color es lo que se ve al cargar la pagina, pero no hay caso, cuando le pongo el negro como me dices no sale la imagen, es o una cosa o la otra, en la tuya si puedo ver que has puesto un color gris al cargar, pero en la mía hay blanco y no puedo cambiarlo a menos que sea de otro lado.
Y lo del espacio creo que lo dejaré así, no quiero perder la opción de poder agregar mas cosas en la sidebar. Y como lo otro no resulta, y ni siquiera veo el cartel que dices ni clicando en categorías, no se...ya saqué el otro código que me dijiste y no modificó nada...
Lo extraño es que tengo la misma plantilla en un blog de pruebas y allí no sale ningún espacio, traté de copiar todo como está en la otra pero, no, no hay caso.
No se si pueda ser algún error en las medidas del logo o que.
Igualmente muchas gracias!!
Besotes!!
Llevas razón k_nelita al añadir de background una imagen no se puede añadir otro background de color.
Pero seguiré mirando la forma de hacerlo ;)
muy buen post :)
Gracias Melbourne, bienvenida ;)
hola Gema! aquí de nuevo tomando otro post tuyo para corregir el mío. Y ahí viene mi problema pero porque pude usar este de enmarcar y delimitar la parte de FOOTER pero lo que no logro hacer es ver dónde puedo personalizar el tamaño, el largo y la distribución de la información que quiero que a aparezca allí. Nuevamente pidiendo tu ayuda. De hecho saqué que aparezca el autor del post ya que aparece debajo del título del post y no logro ver dónde o cuáles son esos datos. Mi plantilla de la que hablo está en http://www.cartografiasdesplegadas.blogspot.com.
La verdad que quería ver si podía sola esta vez!!! jajaja y aquí estoy sin haberlo podido hacer para esperar tus tan claras indicaciones!!!
saludos y gracias desde ya!!
Ah! y tendré que corregirlo estos datos del FOOTER desde la plantilla directamente, desde la edición, ya que desde la parte de diseño donde muestra el dibujo de cada parte de la plantilla los cambios que hago no los toma en cuenta. Lo cual creo que tiene que ver con la plantilla en sí en html.
saludos y nuevamente gracias!!
Hola Susana en
.post-footer es donde puedes modificar respecto a color, borde, imagen.. como ya lo hiciste.
El tamaño viene predeterminado de manera que conforme vas añadiendo cosas el espacio va alargándose.
Para localizar en la plantilla los espacios que son ocupados en el footer debes saber que:
<p class='post-footer-line post-footer-line-1'>
Contiene los datos de autor.
<p class='post-footer-line post-footer-line-2'>
Contiene las etiquetas.
<p class='post-footer-line post-footer-line-3'>
Suele emplearse para añadir marcadores sociales, entradas relacionadas y algún que otro complemento.
Me olvidaba, lo ideal sería antes de nada solucionar ese problema que comentas (no poder trabajar en la plantilla de diseño)
Haz esta prueba... sitúate en plantilla edición de html.
Marca la casilla para expandir la plantilla.
Luego vuelve a plantilla de diseño y mira si puedes trabajar con ella y guarda los cambios.
En plantilla de diseño, en "Editar" es el lugar más sencillo donde puedes modificar lo que aparecerá en el footter, sólo hay que marcar las casilla que deseamos mostrar y arrastrar la etiqueta hasta el footer.
Muy bueno por tu soporte que nos das, voy a comenzar a leer.
oye, felicidades, muy buen espacio para aprender, una pregunta como puedo poner? este tipo de comentarios en mi blog.
Te agradezco el comentario Tigremen :)
El diseño de los comentarios tiene varias modificaciones:
Mostrar comentarios en la misma entrada.
Color en los comentarios de la página principal
Imagen del perfil en los comentarios de la página principal
Imagen decorativa en los comentarios
Sustituir texto de comentarios personalizados por una imagen.
A todas estas modificaciones hay que añadir dos más que aún no he tenido tiempo de postear sobre ellas. Se trata de añadir el nuevo formulario de comentarios y un enlace con la posibilidad de poder comentar también con el antiguo formulario.
Si te decides a poner en práctica todo lo anterior te recomiendo hacer una copia de la plantilla, ya que todas las plantillas no son iguales y un pequeño error puede ocasionar un gran problema.
(No estaría demás ver los resultados antes en un blog de pruebas con la misma plantilla claro está)
Suerte ;)
Gema, aca dando lata otra vez... mi plantilla tiene un marco en el footer, que esta vacio, como puedo ponerle una imagen?
Muchisimas gracias!
Hola Alely si te sitúas en plantilla de diseño verás que en esa parte está la opción para añadir un gadget simplemente haces click y escoges la opción de imagen.
Esa es la forma más sencilla sin embargo seguramente la imagen no saldrá centrada entonces lo mejor es hacer click en el gadget pero escogiendo HTML... ahí añades el código de la imagen que sería :
<img src="url-de-la-imagen"> y le añades <center> al principio y </center> al final del código:
<center><img src="url-de-la-imagen"></center>
Si al mismo tiempo que añades la imagen te gustaría que esa imagen actualizara la página al hacer click sobre ella entonces puedes añadir:
<a href="url-de-la-página"><img src="url-de-la-imagen"></a>
hola gem@ he dejado un comentario y ha desaparecido... el código que me das para poner una linea de puntos entre las entradas y el sidebar no figura en CSS de mi página. no hay nada parecido...
S.O.S #sidebar-wrapper ¿no está en tu blog? déjame el enlace a tu blog S.O.S
Nice Gema!, Gracias por milesima vez :P. oye bella y guapa.... tenias un truquito que vi de reojo un día de prisas, algo sobre... tener en la pantalla principal al pie, me parece, si miento disculpame, el escritorio de blogger, osea: editar, diseño, configuración, etc... no lo encuentro por ningun lado :'(
Juno pues no recuerdo eso... ¿quieres decir que en la página del blog aparecía editar, diseño, configuración? :O ¿no lo verías en otro blog? Despertaste mi curiosidad si lo encuentras me dices donde y vemos como hacerlo ;)
hola gem@!!! está nevando!!! te lo he escrito en algún lado pero no recuerdo dónde: ¿cómo pongo lineas de separación (dividers) horizontales sencillos de una sola linea solid en la sidebar? abrazos y roscones!!!
lk si es para separar los widgets puedes hacerlo en:.sidebar .widget{
añadiendo:
border-bottom:1px solid #ccc;
Gracias por tu ayuda...
Luis MC
» A ti Luis por tomarte tu tiempo de comentar ;)
Hola Gema, he añadido un wigtes encima de las entradas del blog que quisiera enmarcar, pero creo que dentro de las opciones que nos pones no está contemplado el poder hacerlo en ésta wigtes.
Me podrías ayudar?. Si te pasas por el blog verás lo que te comento. http://www.blogger.com
Un saludo
éstos son algunos de los bordes que yo quería utilizar en los textos a partir de tu post efecto sombra...
Y no sólo uno.
¿Se pueden nombrar clases distintas?
Saludos Gem@
Gema soy nueva por tu blog, estoy hace bastante mirando y la verdad que me parecio muy completo. Pare para ver si me podes ayudar con un tema que tiene que ver con esto de los bordes que todavia no tengo claro. El borde ya lo puse, me gusta y le cambie el color, pero el tema es que me quedo muy pegado a las entradas, es decir casi sin margen. ¿Tenes idea de como puedo arreglar esto? ah, y otra cosa mas, lo puse de 1px y asi y todo me parece muy tosco, se podra achicar mas?
Sin apuros y paciente espero tu respuesta =)
Mi Blog: http://juugodeanana.blogspot.com/
iherba siento ver este comentario con tanto retraso, esa url que me dejaste es la de acceso a Blogger necesitaría saber la del blog al que te refires ;)
yz Mar te pido disculpas por ese descuido mio al no ver el comentario :(
¿Te refieres a añadir distintas clases a la sobra?
yz Loree puedes añadirlo así:
border: 1px dashed #666666; ;)
No te preocupes Gem@, me he vuelto una experta
;)
La cabecera te la debo aunque sea muy simple. Por lo demás, encantada de resaltar párrafos en textos largos en especial en Itinerarios
Mejor a ensayo y error y sin molestar tanto.
Muchas gracias de todos modos.
Un beso
No es ninguna molestia Mar, a veces ocurre que por descuido queda el comentario sin responder hasta que llega otro posterior y nos damos cuenta :(
gracias gema, has sido de gran ayuda. Solo me queda solucionar mi otra duda, ya encontrare la solucion..
Loree pensaba que también había añadido eso :O
Para dejar un margen a ambos lados busca donde dice .post {
Tienes algo así:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #cccccc;
padding-bottom:1.5em;
}
Le añadimos el margen de esta forma padding: 25px 25px 25px 20px; teniendo en cuenta que esos valores añaden espacio en este orden..
arriba, derecha, debajo, izquierda luego le añadimos text-align : justify para justificar el texto y que salga ordenadito y quedaría algo así:
.post {
text-align : justify;
padding: 25px 25px 25px 20px;
border-bottom:1px dotted #cccccc;
padding-bottom:1.5em;
}
Mira en vista previa antes de guardar cambios ;)
Este mismo problema tenía yo y ahora ya esta solucionado, muchas gracias!
El padding-bottom:1.5em; puedes eliminarlo, es el margen de abajo y ya lo añadimos en la línea de arriba.
Ijole... muchas gracias! Leyendo respondí una de mis preguntas que era el dar espacio entre el borde y el post.. gracias!!... otra cosa...cómo puedo eliminar la fecha al inicio del post o del tema... osea... que no aparezca la fecha arriba a la izquierda ya que está pegada al borde? y la verdad no la quiero allí... Gracias una vez mas por tu gran ayuda!
yz Iglesia Bautista Roca Eternala fecha la puede modificar desde la plantilla de diseño, donde dice "Entradas del blog" hay un enlace en la parte inferior "Editar" allí configuramos como deseamos que se muestren algunas cosas en el blog como la fecha, hora, comentarios ... Hay que marcar lo que deseamos que se vea :)
Hola Gem@, me gustaría saber como enmarcar los títulos de los Widget de las sidebar. Por defecto aparecen subrayados. Gracias.
http://rutasyfotos.blogsport.com
yz Sigue este enlace Manuel ;)
¡¡Vaya rapidez!! Muchas gracias Gem@. Con lo que hay en el enlace ya tengo para experimentar.
Saludos.
http://rutasyfotos.blogspot.com
yz La rapidez en contestar muchas veces es producto de la casualidad :)
Hola Gem@, muy interesante el truco, pero me pasa algo raro al momento de implementarlo. Le pongo el borde en 1px; y me lo deja en 4px; , ¿podrías revisar que es lo que estoy haciendo mal?, te lo agradecería mucho, mi blog es www.slavelabordesign.blogspot.com y lo apliqué en la zona de post footer.
Saludos!
Hola Skazi parece que se ha colado una comilla a la derecha del color, como he visto que el texto queda muy pegado al borde intenta añadir unos márgenes:
margin-bottom:35px;margin-left:0px;padding:8px;
border: 1px dashed #B0171F;
Ya me dirás si eso es suficiente ;)
Muchas gracias Gem@!, me sorprende la rapidez con la que respondiste, al parecer si era por culpa de la comilla demás. Por cierto disculpa el haberte dicho que era en post-footer, al final no me gustó ahí y lo intenté con un borde en el post para simular una separación en la plantilla.
Saludos :D
yz No hay que disculpar nada, lo que importa es que lo solucionaste :)
Hola Gem@ :D, no me quedo conforme con el aspecto de mi blog, lo que pasa es que he estado jugando con esto de enmarcar espacios. Mi pregunte sería ¿como elimino esa línea gris que hay debajo de mis entradas?
De nuevo, mi blog es www.slavelabordesign.blogspot.com
Saludos!
yz Skazi aquí tienes esa raya, puedes poner el valor 1px a 0px
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #333333;padding-bottom:1.5em;
}
gema la nverdad soy fans de tu blog jeje es de lo mejor para ayuda de blogs y pues mi duda es la sig ya le puse el margencito doble en la sidebar pero las rayitas me salen pegaditas a la sidebar T_T gema ayudame por favor! jeje de antemano gracias!
yz Rodrigo & Chelo para que no se peguen a la sidebar añade la línea en main-wrapper ;)
uuuuuu gracias viva gem@!!!!
yz No hay de qué Rodrigo :)
GEma eres mi idola!!
No sabes cuántos problemas me has resuelto
Muchas gracias
yz Gracias a ti por comentar Pauli eres muy amable :D
yz Pauli si añades padding a los estilos de los post quedará espacio de separación entre el texto y la líneas de alrededor.
Puedes probar añadiendo lo que está en negrita en el siguiente código de tu plantilla.
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #cccccc;
padding-bottom:1.5em;
padding: 25px 25px 25px 20px;
}
Hola gema, he seguido tu blog y me has resuelto muchos problemas mil graaaciaaas!! pewro ahora tengo uno... nos enseñaste esto
.sidebar .widget{
border:1px dotted #000000;
padding-left: 10px;
margin:0 0 1.0em;
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
que es enmarcar cada widget, bueno eso me resulto pero ahora lo que quiero saber es como hacer lo mismo pero en las entradas? me podrias ayudar gracias!! te dejo mi blog de pruebas para que lo veas losamigosanimales.blogspot.com
gracias!
hola gema, a mi blog le añadi una tercera columna y si quiero recortar la side bar de los widget me recorta la otra columna... te dejo mi blog de prueba para que lo veas, la columna que quiero recortar es la de la derecha..y a ver si me puedes decor como recortar las entradas gracias!!
yz Hola pixi para enmarcar los post puedes hacerlo en:
.post {
text-align : justify;
padding: 25px 25px 25px 20px;
border-bottom:1px dotted #ff6ab5;
padding-bottom:1.5;
Aquí estilos del borde...
} ;)
Hola Gema! Gracias por tanta ayuda como nos prestas. No sé como poner un recuadro a un gadget de texto, a modo de menú. Por más que he leido sobre el tema, no sé como aplicarlo a mi blog. Consigo el recuadro, el problema es que me lo aplica a todos los gadget (incluido imágenes) y yo sólo quiero aplicarlo a un gadget: el de texto. ¿Cómo lo hago? Mira mi blog de pruebas: http://pruebas2530.blogspot.com/. Muchas gracias de antemano.
yz Sohepe no veo ningún gadget en tu blog a no ser que te refieras a esa imagen de la sidebar, para que los estilos los tome sólo ese gadget hay que hacer lo siguiente.
Buscamos la url del gadget en este caso el de esa imagen sería :
<div class='widget Image' id='Image1'>
la id es Image1
En la hoja de estilos añadimos:
#Image1 {
line-height: 20px;
text-align: center;
text-align:left;
padding: 12px;
background-color: #000;
color: #fff;
}
(son estilos imaginarios qu4 puedes cambiar por los tuyos) te vendrá bien leer esta entrada:
http://gemablog-.blogspot.com/2009/05/anadir-estilos-un-gadget.html
yz Cuando dije "Buscamos la url del gadget" quise decir buscamos la id ;)
Hola Gema, cada vez me sorprendes mas.
Donde me tendría que situar para eliminar los bordes de la plantilla original, mi plantilla, los cuales no puedo hacer desaparecer.
Muchas gracias. :O
http://convoirunning.blogspot.com/
:: Hola ofo1965 si te refieres a esas dos esquinas curvas en color gris en el extremo izquierdo de las sidebars son imágenes:
En #right-sidebar-wrapper y #left-sidebar-wrapper es esta línea:
background:#FFFFFF url(http://www2.blogblog.com/no565/corner_sidebar_left.gif) no-repeat scroll left top;
Muchas gracias guapa.
Las pequeñas cosas dan mas guerra. He tomado prestado tú icono ir arriba. Aún no he conseguido que se vea uno mio alojado en storage.to,algo hago mal.
Gracias de nuevo:O
:: Pues yo la veo perfectamente, el mejor sitio para alojar imágenes es Picasa ahí es donde van a parar las imágenes que subimos al blog.
Pienso que es mejor porque la única forma de no verlas es que Blogger esté fuera de servicio, y si no se ve el blog poco importa que no salgan las imágenes :)
Hola Gema, he buscado información por tu blog, pero no encuentro. Te agradecería mucho que me ayudases a solucionar este problema. En la Sidebar estoy añadiendo una serie de fotos que me hacen de vínculo a otras páginas, lo hago anadiendo un widget (añadir foto), Lo que me sucede es que el título me queda completamente pegado a la foto y no encuentro la manera de modificar la plantilla para que quede algo de espacio entre el título y la foto. Te estoy muy agradecida de antemano. Me encanta tu blog.
Hola Gema!
Mi #outer-wrapper { tiene width: 960px;, y si ahí pongo el código del borde el resultado es como si enmarcara el content con todo y header. Por eso, ¿se puede poner este código en el body { ?.
Ya probé y se ve bien, pero no se si es correcto.
Y si al #outer-wrapper { le borro el ancho el contenedor (3 columnas que tengo al pie de página) se pega a los lados de la pantalla, y eso no quiero.
Gracias!
:: Marta y María... aunque lo que añadas sea una imagen si la función que tienen es enlazar una página lo idea sería que incluyeras la imagen en un gadget de HTM... en lugar de uno de imagen.
El título depende donde lo vas a añadir, si vas a utilizar una imagen en cada gadget puedes poner el título en el espacio destinado para ese menester, si añades todas las imágenes dentro de un mismo gadget entonces puedes añadir el título antes o después de la imagen añadiendo los estilos del título con css o la etiqueta span ahí mismo.
:: Mayra Falcón es correcto si lo que deseas enmarcar es todo el borde de la pantalla, es decir fuera de outer-wrapper :)
Muchas gracias!! :D
:: Suerte :)
Hola Gema, lo he intentado como me dijiste, pero con el mismo resultado. Si añado Html, tanto si pongo el título en el campo de título, como si lo pongo dentro y luego adjunto la foto, me sigue quedando muy pegado, incluso poniendo muchos espacios entre el texto y la foto. Con el pluggin firebug (de firefox), consigo modificar el parámetro necesario para separar el título de la foto, pero claro, solo previsualizo, luego no encuentro ese parámetro dentro de la plantilla. ¿se te ocurre algo?.
Un saludo.
Hola Gema.
Me gustaría y no encuentro nada, delimitar el espacio entre comentario y comentario, así como añadir un icono a los mismos, los he perdido, jajajaj,solo me aparece el mio.
El problema lo he generado, creo, al realizar muchas pruebas en mis CSS sobran muchas cosas y no me atrevo a borrar nada.
Por cierto, enhorabuena por tú premio. Me acabo de dar cuenta ahora. Recuerdas a todos tus subscriptores, ¡que tia!.
Muchas gracias por estar ahí.
Gema, solucionado mi proplema.
:: Me alegra esté solucionado el problema ofo1965 pero no sé a qué premio te refieres :S
Soy un desastre, me lo he inventado jajajaj.
Perdona pero esto va a acabar conmigo, jajaja.
:: Perdonado :)
:: Marta y María, contemplativos en el mundo.
Yo creo que lo que falta en la sidebar es añadir los estilos para el título, no lo veo en la plantilla.
Por ejemplo añadir:
.sidebar h2{
margin:0;
padding-left: 30px;
padding-top: 1px;
padding-bottom: 5px;
}
con eso podemos añadir el título en su sitio correspondiente y darle más o menos altura.
De todas formas la etiqueta <br> es otra alternativa ya que produce un salto de línea, es decir si editamos un gadget de los que tiene imagen y añadimos esa etiqueta justo antes de la imagen por fuerza la va a desplazar la imagena la línea siguiente.
http://leyendasdelcamino.blogspot.com
Hola Gema. acabo de suscribrme y no se si figuro en lado alguno. quiero poder delimitar espacios en mi blog con esos papeles amarillos autoadhesivos (post it se llaman aca) que dan la sensación de estar medio despegados...nada formal.
como lo hago?
saludos
jorge
http://leyendasdelcamino.blogspot.com
:: Saludos Jorge, para delimitar los espacios con esas imágenes es necesario dividir las imágenes en dos y modificar los estilos de según los sitios de esos espacios.
Olomán hizo una entrada hace tiempo donde explicaba la forma de hacerlo con otro tipo de imágenes y en la sidebar.
http://oloblogger.blogspot.com/
Ola gema sabes quiero preguntarte algo como hago para poder tener el mismo estilo tuyo en los comentarios ya que tu le colocas unas lienas arriba y abajo
:: Esas líneas se pueden añadir en los estilos de los últimos comentarios by Carlos Hernandez:
http://gemablog-.blogspot.com/2007/08/ltimos-comentarios-con-fechanombrettulo.html
Hola Gem@ permiteme decirte que tienes un maravilloso blog te e seguido desde hace tiempo aunque no habia comentado antes, sabes soy muy indesiso en relacion a el estilo que quiero para mi blog por eso e desidido crear un nuevo blog de pruebas para hacer una plantilla personalizada y no una modificasion de las ya hechas por terceras personas :D..Me gustaria saber como podria añadir una imagen para las entradas en lugar de un color de fondo o los marcos que muestras en esta entrada.
Me explico mejor, quiero una imagen en el fondo para las entradas del blog que se ajuste y aumente al tamaño de las entradas sera muy complicado lograr eso :S..?
Esperare tu respuesta :) El blog de Pruebas es http://nuevaspruebasalea2.blogspot.com/
Que pena elimine el anterior comentario por erros :'(
Hola Gema, queria saber, si en vez de poner efecto al borde por defecto de las imagenes de las entradas, se podria poner una imagen como sobre puesta en las mismas. Me gustaria que las imagenes aparecieran como pegadas al blog con Celo...y no se como hacerlo ;)
Muchas gracias
:: Cordobess@ cualquier estilo puede añadirse a las imágenes de los post, para lo que comentas requiere tener la imagen y añadir todas las imágenes de la misma medida.
:: Magoplup veo tu comentario ahora :S demasiado tarde verdad?
Que exelente ayuda das en tu blog pero lastimosamente para mi no encuentro el codigo "#sidebar-wrapper {" en mi plantilla, habria alguna solucion?, ya que no me gusta el aspecto de mis side bar las quiero separaditas.
Saludos.
olvide añadir mi dirección http://ayacuchorec.blogspot.com/
Saludos querida Gema.
He visto más de 20 blogs que explican cómo encuadrar las entradas y páginas de nuestro blog; algunos dicen que hay que poner el código delante de post { ... y otros como tú que hay que ponerlo en main wrapper y en no se que más... pues ninguno de esos 3 codigos me aparece en mi plantilla...
¿Me podrías decir otro código para colocarlo delante? Porque me da coraje ver mi blog las paginas y entradas colocadas como si flotaran ¬¬
Podrías contestarme en mi blog:
http://insolitadimension.blogspot.com/
Gracias.
Querida Gema,
Aquí estoy otra vez dándote la lata.
He intentado enmarcar la zona de las entradas y queda donde debe, el problema es que no deja margen alrededor, de modo que afea en vez de quedar maravilloso, ¿Podrías ayudarme, por favor?.
No lo verás en el blog porque lo he borrado, pero queda pegado, pegado....
Gracias y un montón de besitos
:: Hola Patricia para dejar un espacio alrededor del contenido sería necesario aumenta el valor en padding, es decir que si lo añades por ejemplo en la sidebar estaría bien poner
#sidebar-wrapper {
padding:25px 20px 5px 22px;
clear:left;
}
el valor de padding al igual que el de margin se establece de izquierda a derecha es decir que el primer valor sería para arriba, el segundo a la derecha, el tercero abajo y el cuatro para la izquierda.
Según aumentes o disminuyas ese valor así vamos dejando espacio :)
Gema,
Muchísimas gracias, ahora si que está delicioso....Voy a intentar seguir mejorando el blog, ahora mi querida barrita lateral.
Muchisimos besos y otra vez gracias
Gema,
Muchísimas gracias, ahora si que está delicioso....Voy a intentar seguir mejorando el blog, ahora mi querida barrita lateral.
Muchisimos besos y otra vez gracias
: Me alegra quedara de tu agrado Patricia :)
Una duda cuanto cobrarias para modificar una plantilla? en dolares por paypal?
:: Depende el trabajo de esa modificación Atreyu, si quieres deja la consulta en
en www.hostingparablogs detallando lo que deseas hacer y en breve te responderán :)
Hola Gema, me deja poner el borde perfectamente, yo quiero el sólido, me deja cambiar de color, pero cuando quiero cambiar 4px por 1px ni caso, me queda igual de ancho, ¿cuál es el motivo? Un saludo, me encantan tus explicaciones.
¿Cómo puedo seguir tu blog? Lo añado a mi lista de blogs y me da error.
Hola Gema, me sirvió de mucho este post, pero tengo un solo problema, no encuentro como poder poner una separación de footer que quede vertical a la separación del borde izquierdo de la sidebar. Tengo agregada tres columnas en el footer y quiero que sobre ella este ese borde de separación. El Blog es "MI vida en Palabras". Desde ya gracias, ojala puedad darle un vistazo o si ya sabes decirme dónde pongo el border o si tengo que crear un código css.
Hola Gema acabo de encontrarme con tu blog por internet y me encanta como ayudas a la gente desinteresadamente !!!
He querido hacer esto pero como puedes comprobar en mi blog http://cocinaparapinuinas.blogspot.com/ no se recuadra entero, ¿sabrías decirme porqué? Gracias
Un saludo
Nota: solo los miembros de este blog pueden publicar comentarios.